<template>
	<view class="forget-wrap">
		<u-navbar :background="{background: '#FFFFFF'}" :border-bottom="false" title="忘记密码" height="88">
		</u-navbar>
		<view class="input-item">
			<view class="input-title">手机号</view>
			<input class="input-text" v-model="phone" type="number" maxlength="11" placeholder="请输入您的手机号" placeholder-class="input-text-pl" />
		</view>
		<view class="input-item">
			<view class="input-title">验证码</view>
			<input class="input-text" v-model="yanZhengMa" type="number" maxlength="8" placeholder="请输入验证码" placeholder-class="input-text-pl" />
			<view class="huoqu" @click="openSms">
				<view class="fengexian"></view>
				<view class="codebtn">{{obtCodeText}}</view>
			</view>
		</view>

		<view class="input-item" style="margin-top: 20rpx;">
			<view class="input-title">新密码</view>
			<input class="input-text" v-model="loginPwd" type="text" placeholder="请输入新密码" placeholder-class="input-text-pl" :password="true" />
		</view>
		
		<view class="input-item">
			<view class="input-title">确认密码</view>
			<input class="input-text" v-model="loginPwd2" type="text" placeholder="请确认新密码" placeholder-class="input-text-pl" :password="true" />
		</view>

		<view class="submitbtn" @click="retrieve">确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			yanZhengMa: '',
			loginPwd: '',
			loginPwd2: '',
			obtCodeText: '获取验证码',
			second: 120,
			interval: 0
		}
	},
	onUnload() {
		clearInterval(this.interval);
	},
	methods: {
		// 发送验证码
		openSms() {
			let that = this
			if (that.second != 120) return
			if (!!!that.phone) {
				uni.showToast({
					title: '请输入您的手机号',
					icon: 'none'
				});
				return
			}
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.sms}`,
				method: 'POST',
				timeout: 30000,
				data: {
					tel: that.phone
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.showToast({
							title: res.data?.msg || '发送成功',
							icon: 'none'
						});

						that.interval = setInterval(() => {
							let times = that.second;
							if (times < 0) {
								clearInterval(that.interval);
								that.second = 120;
								that.obtCodeText = '重新获取';
							} else {
								//小于10秒补0
								that.obtCodeText = `${times < 10 ? `0${times}` : times}s`;
							}
						}, 1000);
						that.obtCodeText = `${that.second}s`;
					} else {
						uni.showToast({
							title: res.data?.msg || '发送失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '发送失败',
						icon: 'none'
					});
				}
			})
		},
		// 重置密码
		retrieve() {
			let that = this;
			if (!!!that.phone) {
				uni.showToast({
					title: '请输入您的手机号',
					icon: 'none'
				});
				return
			}
			if (!!!that.yanZhengMa) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return
			}
			if ((!!that.loginPwd || !!that.loginPwd2) && that.loginPwd != that.loginPwd2) {
				uni.showToast({
					title: '两次输入登录密码不一致',
					icon: 'none'
				});
				return
			}
			if (!!!that.loginPwd) {
				uni.showToast({
					title: '请输入登录密码',
					icon: 'none'
				});
				return
			}

			uni.request({
				url: `${that.$api.baseUrl}${that.$api.forgetPassword}`,
				method: 'POST',
				timeout: 30000,
				data: {
					tel: that.phone,
					code: that.yanZhengMa,
					password: that.loginPwd
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.showToast({
							title: res.data?.msg || '找回成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					} else {
						uni.showToast({
							title: res.data?.msg || '找回失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '找回失败',
						icon: 'none'
					});
				},
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
	}
	.forget-wrap{
		padding-top: 20rpx;
		.huoqu{
			display: flex;
			flex-direction: row;
			height: 100%;
			align-items: center;
		}
		.fengexian{
			width: 2rpx;
			height: 71rpx;
			background-color: #EEEEEE;
		}
		.codebtn{
			width: 237rpx;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
		}
		.submitbtn{
			width: 630rpx;
			height: 90rpx;
			margin-left: 60rpx;
			position: absolute;
			bottom: 96rpx;
			background: linear-gradient(0deg, #615CED, #8286F2);
			box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(97, 92, 237, 0.2);
			border-radius: 45rpx;
			font-size: 36rpx;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.input-item {
		width: 100%;
		height: 108rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		margin-bottom: 2rpx;
	}

	.input-title {
		height: 30rpx;
		text-align: left;
		padding-left: 39rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;
		padding: 0 40rpx 0 40rpx;
	}

	.input-text {
		flex: 1;
		height: 100%;
		text-align: left;
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		padding-left: 10rpx;
	}

	.input-text-pl {
		font-size: 28rpx;
		color: #C5C5C5;
		line-height: 28rpx;
	}
</style>
